<template>
  <div class="financial-management-container">
    <!-- 统计说明文字 -->
    <div class="stat-description">
      <p>约账单统计日期以账单明细入账时间为准。</p>
      <p>日汇总账单在次日6时生成，月汇总账单在次月6日6时生成。如遇特殊情况，可能产生延迟生成情况，敬请谅解。</p>
    </div>

    <!-- 汇总方式切换 -->
    <div class="summary-switch">
      <div class="summary-switch-buttons">
        <el-button-group>
          <el-button :type="summaryType === 'month' ? 'primary' : 'default'"
            @click="summaryType = 'month'">月汇总</el-button>
          <el-button :type="summaryType === 'day' ? 'primary' : 'default'" @click="summaryType = 'day'">日汇总</el-button>
        </el-button-group></br>
      </div>

      <!-- 时间选择器 -->
      <div class="time-selector">
        <el-date-picker v-model="selectedDate" :type="summaryType === 'month' ? 'year' : 'month'"
          :format="summaryType === 'month' ? 'yyyy' : 'yyyy-MM'"
          :value-format="summaryType === 'month' ? 'yyyy' : 'yyyy-MM'"
          :placeholder="summaryType === 'month' ? '选择年份' : '选择月份'" style="width: 150px; margin-right: 10px;"
          @change="onDateChange"></el-date-picker>
        <span class="income-label">{{ summaryType === 'month' ? '每年' : '每月' }}实际入账收入=优惠劵支出</span>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="financialData" style="width: 100%" stripe border
      :header-cell-style="setHeaderCellStyle" height="664px">
      <el-table-column type="index" label="序号" min-width="120"></el-table-column>

      <el-table-column :prop="summaryType === 'month' ? 'createDate' : 'createDate'"
        :label="summaryType === 'month' ? '月份' : '日期'" width="120">
        <template slot-scope="scope">
          {{ summaryType === 'month' ? scope.row.createDate.slice(0, 7) : scope.row.createDate.split('T')[0] }}
        </template>
      </el-table-column>
      <el-table-column prop="account" label="账户" min-width="120"></el-table-column>

      <!-- <el-table-column prop="couponExpense" label="优惠劵支出" min-width="150" align="right">
        <template slot-scope="scope">
          <span class="negative-amount">-{{ Math.abs(scope.row.couponExpense).toFixed(2) }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="expenditure" label="收入" min-width="150" align="right">
        <template slot-scope="scope">
          <span class="negative-amount">{{ Math.abs(scope.row.expenditure) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="income" label="提现支出" min-width="120" align="right">
        <template slot-scope="scope">
          <span :class="scope.row.income > 0 ? 'positive-amount' : 'negative-amount'">
            {{ scope.row.income }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="300" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showIncomeDetails(scope.row)">收入明细</el-button>
          <el-button type="text" size="small" @click="showMaterialDetails(scope.row)">材料明细</el-button>
          <el-button type="text" size="small" @click="showWithdrawalRecords(scope.row)">提现记录</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import * as itemOneClass from '../../api/itemOneClass'

export default {
  name: 'FinancialManagement',
  data() {
    return {
      summaryType: 'month', // 'month' 或 'day'
      selectedDate: '', // 日期选择器的值（month模式：yyyy；day模式：yyyy-MM）
      loading: false,
      monthData: [
      ],
      dayData: [
      ]
    }
  },
  computed: {
    // 根据汇总类型和选择的年份/月份筛选数据
    financialData() {
      if (this.summaryType === 'month') {
        // 月汇总：筛选包含 selectedDate（yyyy）的月份数据（如2025 → 2025-01~2025-12）
        return this.monthData.filter(item => item.createDate.startsWith(this.selectedDate))
      } else {
        // 日汇总：筛选包含 selectedDate（yyyy-MM）的日期数据（如2025-09 → 2025-09-11~2025-09-15）
        return this.dayData.filter(item => item.createDate.startsWith(this.selectedDate))
      }
    }
  },
  created() {
    // 初始化默认日期 + 加载数据
    this.setDefaultDate()
    this.fetchFinancialData()
  },
  methods: {
    // 核心：获取财务数据（修正currentYear逻辑）
    fetchFinancialData() {
      this.loading = true // 开启加载状态
      let currentYear = 0 // 初始化currentYear，默认空
      let month = '' // 初始化currentYear，默认空
      let type = '' // 初始化currentYear，默认空
      // 按summaryType设置currentYear：month空，day取年份
      if (this.summaryType === 'day') {
        // month模式下，selectedDate是"yyyy"，直接赋值给currentYear（如2025）
        type = 'month'
        currentYear = 0
        month = this.selectedDate // 按需求赋值：month空，day为月份（如2025-09）
      } else {
        // day模式下，selectedDate是"yyyy-MM"，拆分取年份（如2025-09 → 2025）
        type = 'day'
        currentYear = this.selectedDate
        month = '' // 按需求赋值：month空，day为空（如2025）
      }

      // 构造请求参数（符合需求：month时currentYear空，day时currentYear有值）
      const data = {
        hospitalId: localStorage.getItem('hospitalUid'), // 从本地存储取医院ID
        type: type, // 接口类型：month/day
        currentYear: currentYear, // 按需求赋值：month空，day为年份
        month: month // 月份参数（month模式：yyyy；day模式：yyyy-MM）
      }
      // 实际API调用（注释解开即可使用）
      itemOneClass.statement(data).then(response => {
        console.log('接口返回数据：', response);
        if (response.code === 200) {
          // 若接口返回数据，可替换本地模拟数据（示例）
          this.monthData = response.data.yearList || []
          this.dayData = response.data.monthList || []
          this.loading = false
        } else {
          this.$message.error('数据加载失败，请重试')
        }
      }).catch(err => {
        console.error('接口请求错误：', err)
        this.$message.error('网络异常，请检查连接')
      }).finally(() => {
        this.loading = false // 无论成功失败，关闭加载状态
      })


    },

    // 查看收入明细
    showIncomeDetails(row) {
      const timeLabel = this.summaryType === 'month' ? row.createDate : row.createDate
      this.$message.info(`查看${timeLabel}收入明细`)
      // 实际场景：打开弹窗或跳转页面（示例）
      // this.$router.push({ path: '/income-details', query: { time: timeLabel } })
    },

    // 查看材料明细
    showMaterialDetails(row) {
      const timeLabel = this.summaryType === 'month' ? row.createDate : row.createDate
      this.$message.info(`查看${timeLabel}材料明细`)
    },

    // 查看提现记录
    showWithdrawalRecords(row) {
      const timeLabel = this.summaryType === 'month' ? row.createDate : row.createDate
      this.$message.info(`查看${timeLabel}提现记录`)
    },

    // 设置默认日期（month：当前年；day：当前月）
    setDefaultDate() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0') // 月份补0（如9→09）

      if (this.summaryType === 'month') {
        this.selectedDate = `${year}` // 月模式：2025
      } else {
        this.selectedDate = `${year}-${month}` // 日模式：2025-09
      }
    },

    // 日期选择器变化时重新加载数据
    onDateChange() {
      this.fetchFinancialData()
    },

    // 设置表头样式
    setHeaderCellStyle() {
      return {
        'background-color': '#fafafa !important',
        'color': '#303133 !important',
        'border-color': '#ebeef5 !important'
      }
    }
  },
  watch: {
    // 切换汇总类型时，重置默认日期并重新加载数据
    summaryType(newType) {
      this.setDefaultDate()
      this.fetchFinancialData()
    }
  }
}
</script>

<style scoped>
.financial-management-container {
  padding: 20px;
  background-color: #fff;
}

.stat-description {
  padding: 15px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.8;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

/* 选中按钮样式（自定义绿色） */
.summary-switch .el-button--primary {
  background-color: #30d9bb;
  border-color: #30d9bb;
}

.summary-switch .el-button--primary:hover {
  background-color: #2ac7a8;
  border-color: #2ac7a8;
}

.summary-switch .el-button--primary:focus {
  background-color: #30d9bb;
  border-color: #30d9bb;
}

.summary-switch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.summary-switch-buttons {
  margin-bottom: 10px;
}

.income-label {
  margin-left: 15px;
  color: #606266;
  font-size: 14px;
}

/* 金额颜色：收入绿，支出红 */
.positive-amount {
  color: #67c23a;
}

.negative-amount {
  color: #f56c6c;
}

/* 表格样式优化（增强特异性，避免样式覆盖） */
::v-deep(.el-table th) {
  background-color: #fafafa !important;
  font-weight: 500;
  color: #303133;
}

::v-deep(.el-table td) {
  padding: 10px 0;
}
</style>